<template>
  <div>
    <!-- <h1>my</h1> -->
    <!-- <router-link :to="{name:'login'}"> -->
    <div class="login-link" @click="login">
      <div class="head_div">
        <van-image round width="60" height="60" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <div class="login_mark">{{user.username}}</div>
        <div class="phone_mark">
          <van-icon name="phone-o" />暂无绑定手机号
        </div>
      </div>
    </div>
    <!-- </router-link> -->
    <div class="info">
      <div class="money">
        <span class="info-data-top">
          <span style="color: rgb(255,153,0); font-weight: bolder;font-size: 30px;">0.00</span>
          <span>元</span>
        </span>
        <span class="info-data-bottom">
          我的余额
        </span>
      </div>
      <div class="benefit">
        <span class="info-data-top">
          <span style="color: rgb(255,95,62); font-weight: bolder;font-size: 30px;">{{user.gift_amount}}</span>
          <span>个</span>
        </span>
        <span class="info-data-bottom">
          我的优惠
        </span>
      </div>
      <div class="integral">
        <span class="info-data-top">
          <span style="color: rgb(106,194,11); font-weight: bolder;font-size: 30px;">{{user.point}}</span>
          <span>分</span>
        </span>
        <span class="info-data-bottom">
          我的积分
        </span>
      </div>
    </div>

    <van-cell value="我的订单" icon="location-o" is-link to="order" />
    <van-cell value="积分商城" icon="location-o" is-link to="integral" />
    <van-cell value="饿了么会员" icon="location-o" is-link to="vipcard" />
    <van-cell value="服务中心" icon="location-o" is-link to="service" />
    <van-cell value="下载饿了么APP" icon="location-o" is-link to="download" />
  </div>

</template>
<script>
  export default {
    name: 'my',
    data: function () {
      return {
        //设置默认值
        user: {}
      }
    },
    created() {
      //修改title
      this.$store.commit("changeTitle", "我的");

      if (sessionStorage.length > 0) {
        var user = JSON.parse(sessionStorage.getItem('user'));
        console.log(user);
        this.user = user;
      } else {
        this.user = { username: '登录/注册', gift_amount: '0', point: '0' }
      }

    },
    methods: {
      login() {
        if (sessionStorage.length > 0) {
          this.$router.push('/info');
        } else {
          this.$router.push('/login');
        }
      }
    },
  }
</script>
<style lang="less" scoped>
  .login-link {
    width: 97%;
    height: 160px;
    padding: 20px 30px;
    background-color: rgb(49, 144, 232);
  }

  .head_div {
    height: 200px;
    width: 100%;
    display: inline-block;
    position: relative;
  }

  .head_div div {
    width: 80%;
    text-align: left;
  }

  .login_mark {
    margin-top: 10px;
    font-size: 40px;
    font-weight: bold;
    color: white;
  }

  .phone_mark {
    color: white;
  }

  .van-image {
    display: inline-block;
    float: left;
    padding-right: 20px;
  }

  .info {
    width: 100%;
    height: 200px;
    /* background-color: red; */
    margin-bottom: 20px;
  }

  .info div {
    display: inline-block;
    border-right: 2px solid rgb(245, 245, 245);
    width: 33%;
    height: 200px;
    background-color: white;
  }

  .van-cell {
    height: 80px;
    /* text-align: left; */
  }

  .van-cell__value {
    padding-top: 20px;
    font-size: 35px;
  }

  .van-icon {
    margin-top: 20px;
  }

  .info-data-top {
    width: 100%;
    height: 60px;
    padding: 40px 0;
    display: block;
  }

  .info-data-bottom {
    width: 100%;
    height: 50px;
    /* background-color: blue; */
    display: block;

  }
</style>